<template>
  <el-card>
    <template #header>
      <span class="el-card-title">进度仪表盘</span>
      <i-ep-close
        v-show="!panelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      />
    </template>

    <div class="echarts h-full">
      <ECharts v-if="option" :option="option" :id="`Gauge` + props.id" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const option = ref();
onMounted(() => {
  option.value = {
    series: [
      {
        type: "gauge",
        center: ["50%", "70%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 10,
        itemStyle: {
          color: "#FFAB91",
        },
        progress: {
          show: true,
          width: 20,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 20,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 1,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 12,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 14,
          fontFamily: "DINLight",
        },
        grid: {
          containLabel: true,
        },
        detail: {
          valueAnimation: true,
          width: "50%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 32,
          fontWeight: "bolder",
          formatter: "{value}%",
          color: "inherit",
          fontFamily: "DINPro",
        },
        data: [
          {
            value: 80,
          },
        ],
        animationDuration: 2000,
      },
      {
        type: "gauge",
        center: ["50%", "70%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        itemStyle: {
          color: "#FD7347",
        },
        grid: {
          containLabel: true,
        },
        progress: {
          show: true,
          width: 8,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 80,
          },
        ],
        animationDuration: 2000,
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}

.echarts {
  width: 100%;
  height: calc(100% - 45px);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  padding: 15px;
}
</style>
